<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>金格科技内部网站导航</title>
    <link rel="shortcut icon" href="static/favicon.ico"/>
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="/css/default.css"/>
    <link rel="stylesheet" type="text/css" href="/css/component.css"/>
    <link rel="stylesheet" type="text/css" href="/css/paopao.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/modernizr.custom.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>

<div class="container" id="app">
    <header>
        <div class="header-bg">
            <canvas id="canvas" class="canvas">

            </canvas>
            <h1>金格科技内部网站导航</h1>
            <nav class="codrops-demos">
                <a :class="!tagId?'current-demo':''" href="javascript:void(0);" @click="tagClick()">全部</a>
                <a href="javascript:void(0);" v-for="item in navList" :key="item.id" :label="item.name"
                   :value="item.id" @click="tagClick(item.id)"
                   :class="tagId==item.id?'current-demo':''">{{item.name}}</a>

                <a href="javascript:void(0);" @click="showAddTag">+ 添 加</a>
            </nav>
        </div>

    </header>
    <ul class="grid effect-1" id="grid">
        <li  @click="showAddProject">
            <a href="javascript:void(0);" ><img src="https://unsun-pic.oss-cn-guangzhou.aliyuncs.com/kg/20210617134350.png"></a>
        </li>
        <li v-for="item in projectList" :key="item.id" :label="item.name"
            :value="item.id">
            <a :href="item.projectUrl" target="_blank"><img :src="item.imageUrl">{{item.name}}</a>
        </li>
    </ul>

    <el-dialog title="添加项目" :visible.sync="dialogFormVisible" :before-close="handlClose">
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="项目标签" :label-width="formLabelWidth" prop="tagId">
                <el-select v-model="form.tagId" placeholder="请选择活动区域" style="width:300px;">
                    <el-option v-for="item in navList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目logo" :label-width="formLabelWidth" prop="imageUrl">
                <el-input v-model="form.imageUrl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目地址" :label-width="formLabelWidth" prop="projectUrl">
                <el-input v-model="form.projectUrl" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handlClose">取 消</el-button>
            <el-button type="primary" @click="addProject">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.js"></script>
<script src="/js/classie.js"></script>
<script src="/js/AnimOnScroll.js"></script>
<script>
    new AnimOnScroll(document.getElementById('grid'), {
        minDuration: 0.4,
        maxDuration: 0.7,
        viewportFactor: 0.2
    });
    var app = new Vue({
        el: '#app',
        data: {
            navList: [],
            tagId: undefined,
            projectList: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            form: {},
            rules: {
                tagId: [{required: true, message: '请选择项目标签', trigger: 'blur'}],
                name: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
                imageUrl: [{required: true, message: '请输入项目logo', trigger: 'blur'}],
                projectUrl: [{required: true, message: '请输入项目地址', trigger: 'blur'}],
            }
        },
        created() {
            this.tagList();
            this.getProjectList();
        },
        methods: {
            handlClose() {
                this.$refs['form'].resetFields();
                this.dialogFormVisible =false;
            },
            /**
             * 添加项目
             */
            addProject() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'post',
                            url: "/project/add",
                            data: this.form
                        }).then((res => {
                            const data = res.data;
                            if (data.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                });
                                this.handlClose();
                                this.getProjectList();
                            } else {
                                this.$message.error("添加失败");
                            }
                        }))
                    }
                });
            },
            /**
             * 打开添加项目表单
             */
            showAddProject() {
                this.dialogFormVisible = true;
            },
            /**
             * 打开添加tag表单
             */
            showAddTag() {
                this.$prompt('请输入标签名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator: function (v) {
                        return v != null && v != undefined && v != "";
                    },
                    inputErrorMessage: '请输入标签名称',
                }).then(({value}) => {
                    const param = {
                        name: value
                    };
                    axios({
                        method: 'post',
                        url: "/tag/add",
                        data: param
                    }).then((res => {
                        const data = res.data;
                        if (data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            });
                            this.tagList();
                        } else {
                            this.$message.error("添加失败");
                        }
                    }))

                });
            },
            /**
             * tag点击事件
             * @param value
             */
            tagClick(value) {
                this.tagId = value;
                this.getProjectList();
            },
            getProjectList() {
                this.projectList = [];
                const param = {
                    tagId: this.tagId
                }
                axios({
                    method: 'get',
                    url: "/project/list",
                    params: param
                }).then((res => {
                    const data = res.data;
                    if (data.code == 0) {
                        this.projectList = data.data;
                    }
                }))
            },
            tagList() {
                axios.get("/tag/list").then((res => {
                    const data = res.data;
                    if (data.code == 0) {
                        this.navList = data.data;
                    }
                }))
            }
        }
    })
</script>
</body>
<script src="/js/paopao.js"></script>
</html>